import { useNavigate } from "react-router-dom";
// import { Home } from "lucide-react";

// 导出一个名为NotFound的函数组件
export default function NotFound() {
  // 使用useNavigate钩子获取navigate函数，用于页面跳转
  const navigate = useNavigate();

  return (
    // 返回一个div元素，设置居中对齐和上边距
    <div style={{ textAlign: "center", marginTop: "10%" }}>
      {/* 返回一个白色背景，模糊背景，圆角，阴影，内边距，最大宽度，宽度，文本居中的div元素 */}
      <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl p-8 max-w-md w-full text-center">
        {/* 返回一个文本为404，字体加粗，灰色900，下边距为4的h1元素 */}
        <h1 className="text-6xl font-bold text-gray-900 mb-4">404</h1>
        {/* 返回一个文本为Page Not Found，字体加粗，灰色800，下边距为4的h2元素 */}
        <h2 className="text-2xl font-semibold text-gray-800 mb-4">
          Page Not Found
        </h2>
        {/* 返回一个点击后跳转到首页的按钮，内边距，背景色，悬停背景色，文本颜色，字体加粗，圆角，过渡，缩放 */}
        <button
          onClick={() => navigate("/")}
          className="inline-flex items-center px-6 py-3 bg-gray-900 hover:bg-gray-800 text-white font-semibold rounded-lg transition duration-300 ease-in-out transform hover:scale-[1.02] gap-2"
        >
          Return Login
        </button>
      </div>
    </div>
  );
}
